/* global $ */

module.exports = {
  outHtml,
  gridTable
}
function gridTable (title, arr) {
  let redColor = '#f5222d'
  let greenColor = '#52c41a'
  let yellowColor = '#faad14'
  let body = ``
  let script = ``
  // $.log(arr)
  for (let i = 0; i < arr.length; i++) {
    const { dataTitleArr, dataArr, title } = arr[i]
    let trTitle = ''
    let tBody = ''
    try {
      trTitle = dataTitleArr
        .map(k => {
          return `<th title="${k}">${k}</th>`
        })
        .join('')
      tBody = dataArr
        .map(item => {
          let td = item
            .map((v, idx) => {
              let colorStr = ''
              if (['min', 'max', 'avg'].includes(dataTitleArr[idx])) {
                let v1 = +v.replace('ms', '')
                if ((v1 > 0) & (v1 <= 60))
                  colorStr = `style="color:${greenColor}"`
                if ((v1 > 60) & (v1 <= 200))
                  colorStr = `style="color:${yellowColor}"`
                if (v1 > 200) colorStr = `style="color:${redColor}"`
              }
              return `<td ${colorStr}>${v}</td>`
            })
            .join('')
          return `<tr>${td}</tr>`
        })
        .join('')
    } catch (e) {
      $.err(e.stack)
    }
    body += `
    <details open>
    <summary><font size="5">${title}</font></summary>
      <table class="gridtable">
        <thead>
          <tr>${trTitle}</tr>
        </thead>
        <tbody>${tBody}</tbody>
      </table>
    </details>`
  }
  return body
}
function outHtml (htmlTitle, bodyText) {
  return `<!DOCTYPE html>
<html lang="zh-ch">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<head>
  <meta charset="utf-8"><title>${htmlTitle}</title>
    <style type="text/css">
        canvas {width: 90%;height: 300px;}
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size:11px;
            color:#333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            text-align: right;
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #999999;
            background-color: #ffffff;
        }
    </style>
</head>
<body>${bodyText}</body>
</html>`
}
